<!-- 系统日志 -->
<template>
	<div class="journal">
		<el-card class="!border-none" shadow="never">
			<el-form class="ls-form" :model="formData" inline>
				<el-form-item label="管理员">
					<el-input class="w-[280px]" placeholder="请输入" v-model="formData.admin_name" clearable
						@keyup.enter="resetPage" />
				</el-form-item>

				<el-form-item label="访问方式">
					<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
						<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="来源IP">
					<el-input class="w-[280px]" placeholder="请输入" v-model="formData.ip" clearable
						@keyup.enter="resetPage" />
				</el-form-item>

				<el-form-item label="访问时间">
					<daterange-picker v-model:startTime="formData.start_time" v-model:endTime="formData.end_time" />
				</el-form-item>

				<el-form-item label="访问链接">
					<el-input class="w-[280px]" placeholder="请输入" v-model="formData.url" clearable
						@keyup.enter="resetPage" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
					<export-data class="ml-2.5" :fetch-fun="systemLogLists" :params="formData"
						:page-size="pager.size" />
				</el-form-item>
			</el-form>
		</el-card>

		<el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
			<div class="flex">
				<el-button v-perms="['setting.system.log/delete']" :disabled="!selectData.length"
					@click="handleDelete(selectData)" type="danger">
					<template #icon>
						<icon name="el-icon-Delete" />
					</template>
					删除
				</el-button>
				<el-button v-perms="['setting.system.log/deleteAll']"
					@click="handleDeleteAll" type="danger">
					清空日志
				</el-button>
			</div>

			<div>
				<el-table :data="pager.lists" size="large" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column label="记录ID" prop="id" />
					<el-table-column label="操作" prop="action" min-width="120" />
					<el-table-column label="管理员" prop="admin_name" min-width="120" />
					<el-table-column label="管理员ID" prop="admin_id" min-width="120" />
					<el-table-column label="访问链接" prop="url" min-width="160" />
					<el-table-column label="访问方式" prop="type" />
					<el-table-column label="访问参数" prop="params" min-width="160" show-overflow-tooltip >
						<template #default="{ row }">
							<div v-copy="row.params">{{row.params}}</div>
						</template>
					</el-table-column>
					<el-table-column label="来源IP" prop="ip" min-width="160" />
					<el-table-column label="日志时间" prop="create_time" min-width="180" />
					<el-table-column label="操作" width="160" fixed="right">
						<template #default="{ row }">
							<el-button v-perms="['setting.system.log/delete']" type="danger" link
								@click="handleDelete(row.id)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="journal">
	import feedback from '@/utils/feedback'
	import {
		systemLogLists,
		systemLogDelete,
		systemLogDeleteAll
	} from '@/api/setting/system'
	import { usePaging } from '@/hooks/usePaging'

	interface formDataObj {
		admin_name ?: string // 管理员
		url ?: string // 访问链接
		ip ?: string // ip
		type ?: string // 访问方式
		start_time ?: string // 日志时间开始
		end_time ?: string // 日志时间结束
	}

	// 查询表单
	const formData = ref<formDataObj>({
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		start_time: '',
		end_time: ''
	})

	// 访问方式
	const visitType = ref<Array<any>>([
		{
			label: '全部',
			value: ''
		},
		{
			label: 'get',
			value: 'get'
		},
		{
			label: 'post',
			value: 'post'
		},
		{
			label: 'put',
			value: 'put'
		},
		{
			label: 'delete',
			value: 'delete'
		},
		{
			label: 'option',
			value: 'option'
		}
	])

	const { pager, getLists, resetParams, resetPage } = usePaging({
		fetchFun: systemLogLists,
		params: formData.value
	})
	const selectData = ref<any[]>([])
	const handleSelectionChange = (val : any[]) => {
		selectData.value = val.map(({ id }) => id)
	}
	
	const handleDelete = async (id: number | any[]) => {
	    await feedback.confirm('确定要删除？')
	    await systemLogDelete({ id })
	    getLists()
	}
	const handleDeleteAll = async () => {
	    await feedback.confirm('确定要清空？')
	    await systemLogDeleteAll()
	    getLists()
	}

	onMounted(() => {
		getLists()
	})
</script>

<style lang="scss" scoped></style>